import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import { FormattedMessage, injectIntl } from 'react-intl';

import { Button, Col, TextField, Row } from '@folio/stripes/components';
import ImageUpload from '../../util/ImageUpload';

class CafeTableOne extends Component {
  render() {
      const {
          intl
      } = this.props;
    const commitStyle = {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '44px',
      padding: '15px',
      position: 'absolute'
    };
    return (
      <Row style={{ width: '100%' }} center="xs">
        <Col xs={6}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.partyName" />
            }
            component={TextField}
            name="partyName"
            placeholder={intl.formatMessage({ id: 'ui-party.please.input' })+intl.formatMessage({id:'ui-party.loans.columns.party.partyName'})}
            required
          />
        </Col>
        <Col xs={6}>
          <div style={commitStyle}>
            <div>
              <Button
                buttonStyle="default mega"
                onClick={() => {
                  this.props.cancelAction(true);
                }}
              >
                <FormattedMessage id={"ui-party.cancel"}/>
              </Button>
              <Button buttonStyle="primary mega" type="submit">
                  <FormattedMessage id={"ui-party.saveAndExit"}/>
              </Button>
            </div>
          </div>
        </Col>

        <Col xs={6}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.quota" />
            }
            component={TextField}
            name="quota"
            placeholder={intl.formatMessage({ id: 'ui-party.please.input' })+intl.formatMessage({id:'ui-party.loans.columns.party.quota'})}
            required
            hasClearIcon
            type="number"
            min="1"
            max="9999"
          />
        </Col>
        <Col xs={6} />
        <Col xs={6}>
          <Field
            label={
              <FormattedMessage id="ui-party.loans.columns.party.image" />
            }
            component={ImageUpload}
            name="imageId"
            required
            imageUploadHttpInvoke={this.props.imageUploadHttpInvoke}
            stripes={this.props.stripes}
            requiredFlag
          />
        </Col>
        <Col xs={6} />
      </Row>
    );
  }
}

CafeTableOne.propTypes = {};

export default CafeTableOne;
